<template>
    <view v-if="skillDetails">
        <!-- 这是阿姨端的公司展示 -->
        <uni-section title="阿姨技能描述" :addclasstype="'margin-top:0'"></uni-section>
        <uni-list>
            <uni-list-item
                v-for="(item, index) in skillDetails"
                :key="index"
                :show-arrow="true"
                :show-badge="true"
                badge-text="查看详情"
                badge-type="normal"
                :title="item.split(':')[0]"
                :note="item.split(':')[1]"
                @click="showPopup(index)"
            />
            <!-- <uni-list-item :show-arrow="true" title="月嫂" note="照顾二胎、双胞胎、多胞胎" /> -->
        </uni-list>

        <uni-popup ref="popup_skills" type="bottom">
            <view class="popup_skills_wrap">
                <view class="re_title">
                    <image src="/static/jn/c2.png"></image>
                    <text>{{ currentSkillName }}</text>
                </view>
                <view class="re_back_wrap">
                    <view class="re_back" v-for="(item, index) in currentSkill.tips" :key="index">
                        <text class="tinge_text">{{ item.title }}</text>
                        ：
                        <text>{{ item.value }}</text>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import uniPopup from '../../components/uni-popup/uni-popup.vue';
import uniSection from '@/components/uni-section/uni-section.vue';
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';

export default {
    name: 'c-aunty-skill',
    components: {
        uniSection,
        uniList,
        uniListItem,
        uniPopup
    },
    props: {
        skillDetails: {
            type: Array,
            default: () => []
        },
        skillInformation: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            role: this.$global.role,
            currentSkillName: '',
            currentSkill: {}
        };
    },
    created() {
        this.role = this.$global.role;
    },
    methods: {
        showPopup(i) {
            this.currentSkillName = this.skillDetails[i].split(':')[0];
            this.currentSkill = this.skillInformation[i];
            console.log(this.currentSkill);
            this.$refs.popup_skills.open();
        }
    }
};
</script>

<style lang="scss">
.popup_skills_wrap {
    background: rgba(255, 255, 255, 1);
    border-radius: 12rpx 12rpx 0rpx 0rpx;
    padding: 30rpx;
    .re_title {
        border-bottom: 1px solid rgba(153, 153, 153, 1);
        font-size: 30rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        line-height: 40rpx;
        padding-bottom: 20rpx;
        image {
            width: 40rpx;
            height: 40rpx;
            vertical-align: middle;
            margin-right: 10rpx;
        }
    }
    .re_back_wrap {
        padding-top: 20rpx;
        .re_back {
            font-size: 26rpx;
            color: #000000;
            line-height: 32rpx;
            padding: 10rpx 0;
            .tinge_text {
                color: #666666;
            }
        }
    }
}

.popup {
    .content {
        position: relative;
        width: 680rpx;
        margin: 34rpx;
        border-radius: 32rpx;
        background-color: white;
        padding: 120rpx 20rpx 30rpx 34rpx;

        .logo {
            width: 200rpx;
            height: 200rpx;
            border-radius: 100rpx;
            box-shadow: 0 0 1 1 $uni-color-primary;
            position: absolute;
            top: -100rpx;
            left: 240rpx;
        }

        .close {
            width: 68rpx;
            height: 68rpx;
            position: absolute;
            bottom: -100rpx;
            left: 294rpx;
        }

        .title {
            font-size: 36rpx;
            color: #333;
        }

        .desc {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
        }
    }
}
.company_style {
    padding: 0 30rpx;
}
</style>
